import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tools, SearchBar } from 'weaver-mobile';
import { SearchAdvanced, ListViewPage } from 'weaver-mobile-page';
import { renderLoading, getTemplateBasicItemToHtml, getTemplateLinkItem, getTemplateBasicItem } from '../../public';
import { compareParams } from '../../../util';
import BackTop from '../../../public/back-to-top';
const getLabel = Tools.getLabel;
@withRouter
@inject('centerStore')
@observer
export default class MonitorContent extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork-center-content-deleted',
  }
  
  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail',
      coworkId: '',
    }
  }
  
  componentDidMount() {
    const { centerStore: { contentMonitorStore } } = this.props;
    const {  getContentDeleteList,getCoworkDiscussMonitorShareCondition  } = contentMonitorStore;
    getContentDeleteList();
    getCoworkDiscussMonitorShareCondition({contentType:"delete"});
  }

  componentWillUnmount() {
    const { centerStore: { contentMonitorStore } } = this.props;
    const {  doContentDeleteMount, closeAllModel  } = contentMonitorStore;
		doContentDeleteMount();
		closeAllModel();
  }
  
  toDetailPage = (e, id, path) => {
    e.stopPropagation();
    this.setState({coworkId: id});
    this.props.history.push(path);
  }

  getTemplateLinkItem = (curCls, title, name, id, path) => ( // todo: a链接点击事件
    <div className={`${curCls}-item`}>
      <div className={`${curCls}-item-left`}>{title}:</div>
      <div className={`${curCls}-item-right`}>
        <a onClick={(e) => this.toDetailPage(e, id, path)}>{name}</a>
      </div>
    </div>
  )
  
  getTemplate = (template) => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const curCls = "cowork-template-list";
          return (
            <div className={curCls} key={data.id}>
              {getTemplateBasicItemToHtml(curCls, getLabel(83238,"发表内容"), data.remarkBackspan)}
              {this.getTemplateLinkItem(curCls, getLabel(27519,"楼号"), `${data.floorNumspan}`,`${data.floorNum}`,`${this.state.path}?id=${data.coworkid}&&floor=${data.floorNum}`)}
              {getTemplateLinkItem(curCls, getLabel(344,"主题"), data.coworkidspan, data.coworkid)}
              {getTemplateBasicItem(curCls, getLabel(83209, '版块'), data.typeidspan)}
              {getTemplateLinkItem(curCls, getLabel(26684,"删除人"), data.delUserIdspan,data.delUserId )}
              {getTemplateBasicItem(curCls, getLabel(127003,"删除时间"), data.delTimespan)}
            </div>
          );
        },
      }],
    };
    return newTemp;
  }


  render(){
    const { prefixCls, centerStore: { contentMonitorStore } } = this.props;
    const { contentDeleteLoading, contentDeleteList, contentDeleteSearch, getContentDeleteList, updateContentDeleteAdvance, showContentCheck, contentDeleteAdValue, setStoreState,
    doContentDeleteReset, } = contentMonitorStore;

    const buttonGroupData = [
      { key: 'reset',
        text: getLabel(2022,"重置"),
        onClick: doContentDeleteReset
      },
      { key: 'submit',
        text: getLabel(826,"确定"),
        onClick: () => {
          getContentDeleteList();
          this.props.history.go(-1);
        },
        type: 'primary',
      }
    ];
    let compare = true;
    if (contentDeleteSearch) {
      compare = compareParams(toJS(contentDeleteSearch.form.formData), toJS(contentDeleteSearch.form.defaultValues));
    }
    const adType = compare ? 'filter-o' : 'filter-o-hot';

    return contentDeleteLoading ? renderLoading : (
      <div className={prefixCls}>
        <SearchBar 
          placeholder={getLabel(390654,"请输入主题")}
          value={contentDeleteAdValue}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key={adType} type={adType} /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(contentDeleteSearch.path)}
          onChange={val => updateContentDeleteAdvance(val)}
          onSubmit={getContentDeleteList}
        />
        <SearchAdvanced
          store={contentDeleteSearch}
          buttonGroupData={buttonGroupData}
          onChange={(condition, value) => {if(condition.domkey[0] === 'remarkBack') { setStoreState({ contentDeleteAdValue: value }); }}}
        />
        <div className={`cowork-template ${showContentCheck && 'cowork-template-checked'}`}>
          <BackTop
            visibilityHeight='200'
            modal
            target='wm-list-view-page-modal-scrollview'
          >
          <ListViewPage.Normal
            store={contentDeleteList}
            getTemplate={this.getTemplate}
            onRowClick={(selectedRowKeys) => {
              this.setState({coworkId: selectedRowKeys.coworkid});
              this.props.history.push(`${this.state.path}?id=${selectedRowKeys.coworkid}`);
            }}
          />
          </BackTop>
        </div>
      </div>
    );
  }
}